<script setup lang="ts">
// import TabItem from '../src/TabItem.vue';
// import TabsHead from '../src/TabsHead.vue';
// import TabsBottom from '../src/TabsBottom.vue';


import { ref, Ref } from 'vue';
import { TabItem, TabsHead, TabsBottom } from '../src/index';

interface ItemConfig {
	title: string;
	value: string | number;
	badge?: string | number;
	icon?: string;
}

const tabsHeadValue = ref('fe');
const tabsHeadItems: Ref<ItemConfig[]> = ref([
	{ title: '首页', value: 'home' },
	{ title: '推荐', value: 'recommend' },
	{ title: 'Android', value: 'android' },
	{ title: '前端', value: 'fe', badge: 22 },
	{ title: '后端', value: 'be' },
	{ title: 'iOS', value: 'ios' },
	{ title: '产品', value: 'pm' },
	{ title: '人工智能', value: 'ai' },
	{ title: '设计', value: 'design' },
	/* ldq test 2024-09-28【begin】*/
	{ title: '测试选项', value: 'testing' },
	{ title: '测试选项', value: 'testing' },
	{ title: '测试选项', value: 'testing' },
	{ title: '测试选项', value: 'testing' },
	/* ldq test 2024-09-28【end】*/
] as ItemConfig[]);

const tabsBottomValue = ref('home');
const tabsBottomItems: Ref<ItemConfig[]> = ref([
	{ title: '首页', icon: 'nt-icon nt-icon-home', value: 'home' },
	{ title: '沸点', icon: 'nt-icon nt-icon-icon--', value: 'pins' },
	{
		title: '发现',
		icon: 'nt-icon nt-icon-sousuo',
		value: 'find',
		badge: 3,
	},
	{ title: '我', icon: 'nt-icon nt-icon-wode', value: 'mine' },
] as ItemConfig[]);

const handleTabsHeadChange = (value: string) => {
	console.log('TabsHead change:', value);
};
const handleTabsBottomChange = (value: string) => {
	console.log('TabsBottom change:', value);
};
</script>

<template>
  <!-- <TabItem />
  <TabsHead />
  <TabsBottom /> -->
  <div>
		<TabsHead v-model="tabsHeadValue" @change="handleTabsHeadChange">
			<TabItem
				v-for="item in tabsHeadItems"
				:key="item.value"
				:title="item.title"
				:name="item.value"
				:badge="item.badge"
			/>
		</TabsHead>
		<!-- ldq test 2024-09-28【begin】 -->
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<h3>请使用移动端调试模式或者真机调试</h3>
		<!-- ldq test 2024-09-28【end】 -->
		<div class="demo-tab-bar">
			<TabsBottom v-model="tabsBottomValue" @change="handleTabsBottomChange">
				<TabItem
					v-for="item in tabsBottomItems"
					:key="item.value"
					:title="item.title"
					:name="item.value"
					:badge="item.badge"
				>
					<template #icon>
						<i :class="item.icon" />
					</template>
				</TabItem>
			</TabsBottom>
		</div>
	</div>
</template>

<style scoped>
@import './assets/iconfont.css';
body {
	margin: 0;
	min-height: 100vh;
	background: rgb(250, 251, 252);
}
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
.demo-tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

/* ldq test 2024-09-28 */
.tabs-head {
	position: fixed;
	top: 0;
	left: 0;
}

</style>
